<template>
    <div>
        <div class="container">
            <h1>合约公司</h1>
            <el-divider></el-divider>
            <el-input
                v-model="company_name"
                placeholder="请输入想要查询的快递公司名称"
                style="width: 250px"
                @input="handSearch()"
                clearable
                @clear="company_clear()"
            >  <el-button slot="append" icon="el-icon-search"></el-button></el-input>

            <el-button type="primary" @click="editVisible = true" style="margin-left: 72%"
                ><i class="el-icon-office-building el-icon--left"></i>公司入驻<i class="el-icon-plus el-icon--right"></i
            >
            
            </el-button>
            <!-- 公司信息列表开始 -->
            <el-table
                :data="companyList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                stripe
                style="width: 100%; margin-top: 15px"
            >
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column label="公司编号" prop="company_id"></el-table-column>
                <el-table-column label="公司名称" prop="company_name"></el-table-column>
                <el-table-column label="入库单价(￥)" prop="from_price"></el-table-column>
                <el-table-column label="寄件单价(￥)" prop="to_price"></el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">重置</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[5, 10, 30, 45, 60, 75]"
                :page-size.sync="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="length"
                style="margin-left: 35%;  margin-top: 20px"
            ></el-pagination>
        </div>
        <!-- 公司信息列表结束 -->
        <!-- 修改组件开始 -->
        <el-dialog title="修改信息" center :visible.sync="update" @close="dialog_close" width="30%">
            <el-form :model="company" :rules="ruleForm" ref="company" label-width="100px">
                <el-form-item label="公司编号:">
                    <el-input v-model="company.company_id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="公司名称:">
                    <el-input v-model="company.company_name" placeholder="请输入公司名称" clearable @clear="clear_company"></el-input>
                </el-form-item>
                <el-form-item label="入库单价(￥):">
                    <el-input v-model="company.from_price" placeholder="请输入快件入库每件单价" clearable></el-input>
                </el-form-item>
                <el-form-item label="寄件单价(￥):">
                    <el-input v-model="company.to_price" placeholder="请输入快件寄出每件单价" clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateCompany()" type="primary">确认</el-button>
                <el-button @click="deleteCompany()" type="danger">解约</el-button>
            </span>
        </el-dialog>
        <!-- 修改组件结束 -->

        <template>
            <el-dialog title="公司入驻" @close="dialog_close" :visible.sync="editVisible" width="30%">
                <el-form :model="companyList1" :rules="ruleForm" ref="companyList">
                    <el-form-item label="公司名称" prop="company_name">
                        <el-input v-model="companyList1.company_name" placeholder="请输入公司名称"></el-input>
                    </el-form-item>
                    <el-form-item label="入库价格" prop="from_price">
                        <el-input v-model="companyList1.from_price" placeholder="请输入每件快件入库价格"></el-input>
                    </el-form-item>
                    <el-form-item label="寄件价格" prop="to_price">
                        <el-input v-model="companyList1.to_price" placeholder="请输入每件快件寄出价格"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addCompany">确 定</el-button>
                </span>
            </el-dialog>
        </template>
    </div>
</template>
<script>
export default {
    // inject: ['reload'],
    // vue名字
    name: 'Company', // 数据
    data() {
        //校验规则
        let validateCompanyName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入公司名称'));
            }
            const companyNameRule = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
            if (companyNameRule.test(value)) {
                return callback();
            } else {
                return callback(new Error('请输入中文,英文'));
            }
        };
        //校验规则
        let validatePrice = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请输入快件入库价格'));
            }
            const PriceRule = /^[0-9]+\.[0-9]{2}$/;
            if (PriceRule.test(value)) {
                return callback();
            } else {
                return callback(new Error('请输入符合规则的两位小数'));
            }
        };
        return {
            editVisible: false,
            companyList1: {
                company_name: '',
                from_price: '',
                to_price: ''
            },
            //总数
            length: 0, //初始页
            currentPage: 1, //初始页大小
            pagesize: 5,
            companyList: [
                {
                    company_id: '', //公司id
                    company_name: '', //公司姓名
                    from_price: '', //快件每件入库单价
                    to_price: '', //快加每次寄出单价
                    state: '' //状态
                }
            ],
            company: {
                company_id: '', //公司id
                company_name: '', //公司姓名
                from_price: '', //快件每件入库单价
                to_price: '', //快加每次寄出单价
                state: '' //状态
            },
            update: false,
            company_name: '', //用于组件是否显示
            ruleForm: {
                company_name: [{ required: true, validator: validateCompanyName, trigger: 'blur' }],
                from_price: [{ required: true, validator: validatePrice, trigger: 'blur' }],
                to_price: [{ required: true, validator: validatePrice, trigger: 'blur' }]
            }
        };
    }, // 方法
    methods: {
       
        company_clear() {
            this.getData();
        },
        dialog_close() {
            this.$router.go(0);
        },
        clear_company() {
            if (this.company.company_name === '') {
                this.company.to_price = null;
                this.company.from_price = null;
            }
        },
        dialog_close() {
            this.$router.go(0);
        },
        addCompany() {
            //校验规则
            this.$refs['companyList1'].validate((valid) => {
                if (valid) {
                    let param = new URLSearchParams();
                    param.append('company_name', this.companyList1.company_name);
                    param.append('from_price', this.companyList1.from_price);
                    param.append('to_price', this.companyList1.to_price);
                    this.$axios({
                        method: 'post',
                        url: 'company/add',
                        data: param,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                    })
                        .then((res) => {
                            if (res.data.code == 1) {
                                this.$message.success('办理成功！');
                            } else {
                                this.$message.error(res.date.mess);
                            }
                        })
                        .catch((error) => {
                            this.$message.error('出错了');
                        });
                } else {
                    return false;
                }
            });
        },
        // 当前页大小
        handleSizeChange(val) {
            this.pagesize = val;
            console.log('走了size');
        }, // 当前页
        handleCurrentChange(val) {
            this.currentPage = val;
            console.log('走了另一个');
        },
        //获取公司信息
        getData() {
            this.$axios({
                method: 'get',
                url: 'company/query-all',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            }).then((res) => {
                console.log(res.data);
                if (res.data.code == 1) {
                    this.companyList = res.data.data;
                    this.length = this.companyList.length;
                }
            });
        },
        // 修改组件显示
        handleClick(row) {
            //控制组件是否显示
            this.update = true;
            //回显数据
            this.company.company_id = row.company_id;
            this.company.company_name = row.company_name;
            this.company.from_price = row.from_price;
            this.company.to_price = row.to_price;
        },
        //修改公司信息
        updateCompany() {
            this.$refs['company'].validate((valid) => {
                if (valid) {
                    let param = new URLSearchParams();
                    param.append('company_id', this.company.company_id);
                    param.append('company_name', this.company.company_name);
                    param.append('from_price', this.company.from_price);
                    param.append('to_price', this.company.to_price);
                    this.$axios({
                        method: 'put',
                        url: 'company/update',
                        data: param,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                    })
                        .then((res) => {
                            if ((res.data.code = 1)) {
                                this.update = false;
                                this.$router.go(0);
                                this.$message.success(res.data.mess);
                            } else {
                                this.$message.info(res.data.mess);
                            }
                        })
                        .catch((error) => {
                            this.$message.error('出错了');
                        });
                } else {
                    return false;
                }
            });
        },
        //解约公司
        deleteCompany() {
            let param = new URLSearchParams();
            param.append('company_id', this.company.company_id);
            this.$axios({
                method: 'delete',
                url: 'company/delete',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            }).then((res) => {
                if (res.data.code == 1) {
                    this.$message.success('解约成功！');
                }
            });
        },
        //搜索
        handSearch() {
            if (this.company_name != '') {
                let param = new URLSearchParams();
                param.append('company_name', this.company_name);
                this.$axios({
                    method: 'post',
                    url: 'company/queryByName',
                    data: param,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                }).then((res) => {
                    if (res.data.code == 1) {
                        this.companyList = res.data.data;
                        this.length = res.data.data.length;
                    } else {
                        this.$message.info('暂无数据');
                    }
                });
            }
        }
    }, // 页面初始化生命周期函数
    created() {
        this.getData();
    }
};
</script>

<style scoped>
</style>